<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>出入库月汇总</span>
      </div>
      <div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="年月">
            <el-date-picker
              type="month"
              placeholder="选择月份"
              value-format="yyyy-MM"
              v-model="queryParams.yearMonth">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="仓库">
            <el-select placeholder="请选择" v-model="queryParams.warehouse">
              <el-option label="全部" value=""></el-option>
              <el-option label="主仓库" value="main"></el-option>
              <el-option label="分仓库A" value="branchA"></el-option>
              <el-option label="分仓库B" value="branchB"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物料分类">
            <el-select placeholder="请选择" v-model="queryParams.category">
              <el-option label="全部" value=""></el-option>
              <el-option label="原材料" value="raw"></el-option>
              <el-option label="半成品" value="semi"></el-option>
              <el-option label="成品" value="finished"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button type="warning" icon="el-icon-download" @click="handleExport">导出</el-button>
          </el-form-item>
        </el-form>
        
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="warehouse" label="仓库" width="120"></el-table-column>
          <el-table-column prop="material" label="物料" width="150"></el-table-column>
          <el-table-column prop="category" label="物料分类" width="100"></el-table-column>
          <el-table-column prop="beginQty" label="期初数量"></el-table-column>
          <el-table-column prop="inQty" label="入库数量"></el-table-column>
          <el-table-column prop="outQty" label="出库数量"></el-table-column>
          <el-table-column prop="endQty" label="期末数量"></el-table-column>
          <el-table-column prop="unit" label="单位" width="80"></el-table-column>
          <el-table-column prop="amount" label="期末金额" width="100"></el-table-column>
          <el-table-column label="操作" width="100" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'StkIoMonthSumWm',
  data() {
    return {
      queryParams: {
        yearMonth: new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0'),
        warehouse: '',
        category: ''
      },
      tableData: [
        {
          warehouse: '主仓库',
          material: 'A型原材料',
          category: '原材料',
          beginQty: 800,
          inQty: 500,
          outQty: 300,
          endQty: 1000,
          unit: '件',
          amount: 5500
        },
        {
          warehouse: '主仓库',
          material: 'B型半成品',
          category: '半成品',
          beginQty: 300,
          inQty: 300,
          outQty: 100,
          endQty: 500,
          unit: '个',
          amount: 5400
        },
        {
          warehouse: '分仓库A',
          material: 'C型成品',
          category: '成品',
          beginQty: 150,
          inQty: 100,
          outQty: 50,
          endQty: 200,
          unit: '台',
          amount: 20000
        }
      ]
    }
  },
  methods: {
    handleQuery() {
      this.$message.success('查询数据: ' + this.queryParams.yearMonth)
      // 实际应用中这里应该调用API获取数据
    },
    handleExport() {
      this.$message.success('导出数据')
    },
    handleDetail(row) {
      this.$message.success('查看详情: ' + row.material)
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style> 